<template>
<div class="small-4 medium-6 cell">
  <a class="et-switch-menu-btn show-for-large" @click="switchNavSizeHanlder">
    <et-icon :name="iconName" />
  </a>
  <a class="et-open-drawer-btn show-for-small-only" @click="openDrawerHandler">
    <et-icon :name="iconName" />
  </a>
</div>
</template>

<script>
import { EtIcon } from '../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    iconName: {
      type: String,
      default: 'menu'
    },
    canvasId: {
      type: String,
      required: true
    }
  },

  methods: {

    switchNavSizeHanlder() {
      if ($('aside').width() === 50) {
        this.closeOffCanvas();
        $('#app').removeClass('et-medium');

        // the below code is for the float opsbar.
        // if ($('.operation-bar').hasClass('ops-bar-stick')) {
        //   $('.operation-bar').css('width', 'calc(100% - 200px)');
        // } else {
        //   $('.operation-bar').removeAttr('style');
        // }
      } else {
        this.closeOffCanvas();
        $('#app').addClass('et-medium');

        // the below code is for the float opsbar.
        // if ($('.operation-bar').hasClass('ops-bar-stick')) {
        //   $('.operation-bar').css('width', 'calc(100% - 50px)');
        // } else {
        //   $('.operation-bar').removeAttr('style');
        // }
      }
    },

    openDrawerHandler() {
      $('#offCanvasRight').foundation('close');
      $(`#${this.canvasId}`).foundation('open');
    },

    closeOffCanvas() {
      if ($('#offCanvasRight.is-open').length > 0) {
        $('#offCanvasRight.is-open').foundation('close');
      }
    }

  }

};
</script>
